<!--
	概率地震需求分析
	Created by Penglei on 2023/08/10
-->
<template>
	<div id="seismicChartsRef" ref="seismicChartsRef" class="echats-box"></div>
</template>

<script setup name="FragilityCurve">
import { getCurrentInstance, onMounted } from 'vue';
// 引入echats
import * as echarts from 'echarts';
// 引入接口
import { getProbabilisticByIdApi } from '@/api/vulnerability';
// 引入公用方法
import { ArrayObjUniq } from '@/utils/ruoyi';

// 当前实例
const { proxy } = getCurrentInstance();
// 父组件传参
const props = defineProps({
	paramList1: {
		type: Array,
		requied: false,
		defualt: () => []
	}
});

// 图表
let myChart = null;
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(proxy.$refs.seismicChartsRef);
	}
	// 数据
	let arrData = [];
	let arrMarkLine = [];
	if (data && data.length) {
		// 去重、排序
		data = ArrayObjUniq(data, 'dzdParamsLog').sort((a, b) => a.dzdParamsLog - b.dzdParamsLog);
		// 数据抽稀
		if(data.length > 10000) {
			data = data.filter((item, index) => {
				return index % 60 == 0 || index == data.length - 1;
			});
		} else if(data.length > 1000) {
			data = data.filter((item, index) => {
				return index % 5 == 0 || index == data.length - 1;
			});
		} else if(data.length > 100) {
			data = data.filter((item, index) => {
				return index % 2 == 0 || index == data.length - 1;
			});
		}
		// 遍历
		data.map((item, index) => {
			const arr = [item.dzdParamsLog, item.responseParamsLog];
			// 取首位的点，模拟直线
			if(index == 0 || index == data.length - 1) {
				arrMarkLine.push(arr);
			}
			arrData.push(arr);
		})
	}
	// 模拟数据
	// let arrData = [
	// 	[10.0, 8.04],
	// 	[8.0, 6.95],
	// 	[13.0, 7.58],
	// 	[9.0, 8.81],
	// 	[11.0, 8.33],
	// 	[14.0, 9.96],
	// 	[6.0, 7.24],
	// 	[4.0, 4.26],
	// 	[12.0, 10.84],
	// 	[7.0, 4.82],
	// 	[5.0, 5.68]
	// ];

	// 拟合线
	const markLineOpt = {
		animation: false,
		// label: {
		// 	show: false,
		// 	formatter: 'y = 0.5 * x + 3',
		// 	align: 'right'
		// },
		lineStyle: {
			width: 2,
			type: 'solid',
			color: '#FFB35B',
		},
		// tooltip: {
		// 	formatter: 'y = 0.5 * x + 3'
		// },
		data: [
			[
				{
					coord: arrMarkLine.length ? arrMarkLine[0] : [],
					symbol: 'none'
				},
				{
					coord: arrMarkLine.length ? arrMarkLine[arrMarkLine.length - 1] : [],
					symbol: 'none'
				}
			]
		]
	};
	// 配置项
	const option = {
		// 提示
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
		},
		// 图例
		legend: {
			show: false,
			right: 10,
			top: 80,
			align: 'left', //朝向
			orient: 'vertical', //垂直
			borderRadius: 0,
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 10,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF70',
			},
		},
		xAxis: {
			type: 'value',
			name: 'In IM',
			nameLocation: 'end',
			nameTextStyle: {
				fontSize: 12,
				color: '#FFFFFF70',
				align: 'left',
				verticalAlign: 'top',
				padding: [-5, 0, 0, 0]
			},
			// min: 0,
			// 线条和刻度
			axisLine: {
				show: true,
				color: '#999999',
				lineStyle: {
					width: 2,
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 11,
				color: '#FFFFFF',
			},
			splitLine: {
				show: false,
			}
		},
		yAxis: {
			type: 'value',
			name: 'ln θmax',
			nameLocation: 'end',
			nameTextStyle: {
				fontSize: 12,
				color: '#FFFFFF',
				align: 'center',
				verticalAlign: 'top',
				padding: [-5, 0, 0, 0]
			},
			// min: 0,
			// 线条和刻度
			axisLine: {
				show: false,
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				color: '#999999',
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
					color: '#475ADB80'
				}
			}
		},
		grid: {
			show: false,
			left: '15%',
			right: '15%',
			top: 30,
			bottom: 30,
		},
		color: ['#25FFAF'],
		series: [
			{
				type: 'scatter',
				symbolSize: 8,
				// 数据
				data: arrData,
				// 拟合线
				markLine: markLineOpt
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 监听参数id改变
watch(() => props.paramList1, (val) => {
	renderChart(val);
}, {
	// 深层嵌套
	deep: true,
	// 初始触发
	// immediate: true
})
</script>

<style lang="scss" scoped>
.echats-box {
	width: 100%;
	height: 230px;
}
</style>